<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>图片上传本地预览</title>
    <style type="text/css">
        #preview{
            width:260px;
            height:190px;
            margin: 0 auto;
            border:1px solid #000;
            overflow:hidden;
        }
        #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
        .upload-btn{
            display: inline-block;
            color:white;
            font-size: 14px;
            line-height: 24px;
            padding: 4px 12px;
            text-align: center;
            text-decoration: none;
            cursor: pointer;
            border-radius: 4px;
            background-color: rgba(126, 211, 33, 1);
            border: 1px solid;
        }
        .upload-btn:hover{
            background-color: rgba(126, 211, 33, .8);
        }
        .upload-ipt{
            display: none;
        }
        section.upload{
            position: relative;
            z-index: 6;
            width: 24rem;
            height: auto;
            margin: 0 auto;
            padding: 0 0 1rem;
            color: #40444f;
            border: .125rem dashed #616778;
            border-radius: .9375rem;
            cursor: pointer;
            transition: color 0.2s ease-out, border-color 0.2s ease-out;
        }
        section.upload:hover{
            border: .125rem dashed #9a9fad;

        }
        figure.icon{
            display: block;
            width: 4rem;
            height: 3.6rem;
            background-position: center center;
            background-repeat: no-repeat;
            background-image: url(upload.png);
        }
        section.upload p{
            margin: 0;
            text-align: center;
            font-weight: bold;
            font-size: 1.1rem;
        }
    </style>
    <script type="text/javascript">
        //图片上传预览    IE是用了滤镜。
        function previewImage(file) {
            var MAXWIDTH  = 260;
            var MAXHEIGHT = 180;
            var div = document.getElementById('preview');
            if (file.files && file.files[0]) {
                console.log(file.files[0].name)
                div.innerHTML ='<img id=imghead>';
                var img = document.getElementById('imghead');
                img.onload = function(){
                    var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                    img.width  =  rect.width;
                    img.height =  rect.height;
//                 img.style.marginLeft = rect.left+'px';
                    img.style.marginTop = rect.top+'px';
                }
                var reader = new FileReader();
                reader.onload = function(evt){img.src = evt.target.result;}
                reader.readAsDataURL(file.files[0]);
            }
//            else //兼容IE
//            {
//                var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
//                file.select();
//                var src = document.selection.createRange().text;
//                div.innerHTML = '<img id=imghead>';
//                var img = document.getElementById('imghead');
//                img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
//                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
//                status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
//                div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
//            }
        }
        function clacImgZoomParam( maxWidth, maxHeight, width, height ){
            var param = {top:0, left:0, width:width, height:height};
            if( width > maxWidth || height > maxHeight ) {
                var rateWidth = width / maxWidth;
                var rateHeight = height / maxHeight;
                if( rateWidth > rateHeight ) {
                    param.width =  maxWidth;
                    param.height = Math.round(height / rateWidth);
                }else {
                    param.width = Math.round(width / rateHeight);
                    param.height = maxHeight;
                }
            }
            param.left = Math.round((maxWidth - param.width) / 2);
            param.top = Math.round((maxHeight - param.height) / 2);
            return param;
        }

    </script>
</head>
<body>
<section class="upload">
    <figure class="icon"></figure>
    <p>请拖拽图片到此处上传</p>
</section>
<div id="preview">
</div>
<input class="upload-ipt" type="file" onchange="previewImage(this)">
<button class="upload-btn" title="选择文件">选择文件</button>
<div id="file-name"></div>
<form>
    <fieldset>
        <legend>分度读取文件：</legend>
        <input type="file" id="File" />
        <input type="button" value="中断" id="Abort" />
        <p>
            <label>读取进度：</label><progress id="Progress" value="0" max="100"></progress>
        </p>
        <p id="Status"></p>
    </fieldset>
</form>
<script>
    var upBtn = document.getElementsByClassName("upload-btn")[0];
    upBtn.onclick = function(){
        document.getElementsByClassName("upload-ipt")[0].click();

    }
    var h = {
        init: function() {
            var me = this;

            document.getElementById('File').onchange = me.fileHandler;
            document.getElementById('Abort').onclick = me.abortHandler;

            me.status = document.getElementById('Status');
            me.progress = document.getElementById('Progress');
            me.percent = document.getElementById('Percent');

            me.loaded = 0;
            //每次读取1M
            me.step = 1024 * 1024;
            me.times = 0;
        },
        fileHandler: function(e) {
            var me = h;

            var file = me.file = this.files[0];

            var reader = me.reader = new FileReader();

            //
            me.total = file.size;

            reader.onloadstart = me.onLoadStart;
            reader.onprogress = me.onProgress;
            reader.onabort = me.onAbort;
            reader.onerror = me.onerror;
            reader.onload = me.onLoad;
            reader.onloadend = me.onLoadEnd;
            //读取第一块
            me.readBlob(file, 0);
        },
        onLoadStart: function() {
            var me = h;
        },
        onProgress: function(e) {
            var me = h;

            me.loaded += e.loaded;
            //更新进度条
            me.progress.value = (me.loaded / me.total) * 100;
        },
        onAbort: function() {
            var me = h;
        },
        onError: function() {
            var me = h;

        },
        onLoad: function() {
            var me = h;

            if(me.loaded < me.total) {
                me.readBlob(me.loaded);
            } else {
                me.loaded = me.total;
            }
        },
        onLoadEnd: function() {
            var me = h;

        },
        readBlob: function(start) {
            var me = h;

            var blob,
                    file = me.file;

            me.times += 1;

            if(file.webkitSlice) {
                blob = file.webkitSlice(start, start + me.step + 1);
            } else if(file.mozSlice) {
                blob = file.mozSlice(start, start + me.step + 1);
            }

            me.reader.readAsText(blob);
        },
        abortHandler: function() {
            var me = h;

            if(me.reader) {
                me.reader.abort();
            }
        }
    };

    h.init();
</script>
</body>
</html>